<%@ page pageEncoding="UTF-8" language="java" %>


<link rel="stylesheet" type="text/css" href="${base}/css/conversation/font_Icon/iconfont.css">
<link rel="stylesheet" type="text/css" href="${base}/css/conversation/chat.css">
<!-- 模态框 -->
<div class="modal fade" id="myModal" style="height: 620px;">
    <div class="modal-dialog" style="height: 620px;">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">我的消息</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" style="" id="msg-modal">
                <div class="" id="chat">
                    <div class="chatBox-content">
                        <div class="chatBox-content-demo" id="chatBox-content-demo">

                            <div class="clearfloat" v-for="item in content">
                                <div class="author-name">
                                    <small class="chat-date">{{item.msgTime}}</small>
                                </div>
                                <div v-bind:class="item.dir">
                                    <div v-if="item.dir=='left'" class="chat-avatars"><img
                                            v-bind:src="'/student'+item.image" alt="头像"/></div>
                                    <div class="chat-message">
                                        {{item.text}}
                                    </div>
                                    <div v-if="item.dir=='right'" class="chat-avatars"><img
                                            v-bind:src="'${base}'+item.image" alt="头像"/></div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="chatBox-send">
                        <div class="div-textarea" contenteditable="true"></div>
                        <div>
                            <button id="chat-fasong" v-on:click="send" class="btn-default-styles"><i
                                    class="iconfont icon-fasong"></i>
                            </button>
                        </div>

                        <div class="biaoqing-photo">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
<script>
    var MsgContent = new Vue({
        el: '#chat',
        data: {
            conId: 1,
            content: []
        },
        methods: {
            init: function () {
                var _this = this;
                $.ajax({
                    url: base + '/message/getMessage',
                    type: 'post',
                    data: {conId: this.conId},
                    success: function (result) {
                        result = JSON.parse(result)
                        _this.content = result.reverse();
                    }, error: function () {

                    }
                });
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
            },
            send: function () {
                var _this = this;
                var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')
                if (textContent != "") {
                    var d = new Date();
                    this.content.push({
                        text: textContent,
                        msgTime: d.toLocaleString(),
                        dir: 'right',
                        image: '${sessionScope.teacher.te_image}'
                    });
                    //发送后清空输入框
                    $(".div-textarea").html("");
                    //聊天框默认最底部
                    $(document).ready(function () {
                        $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                    });
                    // 保存聊天记录
                    $.ajax({
                        url: base + '/message/save',
                        type: 'post',
                        data: {conId: _this.conId, msg: textContent},
                        success: function (result) {
                            $('#con' + _this.conId).html(textContent);
                        }, error: function () {

                        }
                    })
                }
            }
        }
    })


    // 消息内容
    function showModal(e, conId) {
        // 获取消息内容
        MsgContent.conId = conId;
        MsgContent.init()
        $('#myModal').modal('show');
        // 消息已读
        $.ajax({
            url: base + '/conversation/signRead',
            type: 'post',
            data: JSON.stringify({ids: [conId]}),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                console.log($(e));
                $(e).prev('span').css("display", 'none');
            }, error: function () {
            }
        })
    }

    //      发送信息
    $("#chat-fasong").click(function () {

    });
</script>


<form action="${base}/conversation/index" method="get" id="search">
    <div class="d-flex flex-row">
        <div class="m-3">
            <button type="button" class="btn btn-light" id="btn-read">标记已读</button>
        </div>

        <div class="ml-auto pt-2" style="margin-right: 50px;">
            <div class="dataTables_info" id="sampleTable_info" role="status" aria-live="polite"
                 style="line-height: 30px">
                总页码:${page.pageCount} &nbsp;&nbsp;
                总条数:${page.totalCount}
            </div>
        </div>
        <div class="mr-3">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" onclick="goto(${page.pageIndex-1})">&lt;&lt;</a></li>
                <li class="page-item"><a class="page-link" href="#">${page.pageIndex}</a></li>
                <li class="page-item"><a class="page-link" onclick="goto(${page.pageIndex+1})">&gt;&gt;</a></li>
            </ul>
        </div>
    </div>

</form>
<script>
    function goto(pageIndex) {
        var form = $('#search');  // 分页搜索表单
        var $index = $('<input type="hidden" name="pageIndex">')
        $index.attr('value', pageIndex)
        form.append($index)
        form.submit()
    }

    $('#btn-read').click(function () {
        var checkBoxs = $('input[name="cons"]:checkbox:checked');
        var ids = [];
        checkBoxs.each(function (t, e) {
            ids.push(parseInt(e.value))
        })
        var data = {ids: ids}
        $.ajax({
            url: base + '/conversation/signRead',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(data),
            success: function (result) {
                if (result == 1) {
                    checkBoxs.each(function (i, e) {
                        $(e).parent().next().find('span').css("display", 'none');
                    })
                    $('input:checkbox').prop('checked', false)
                }
            }, error: function () {
                swal({
                    text: '系统繁忙！'
                })
            }
        })
    });
    $('#btn-remove').click(function () {
        var checkBoxs = $('input[name="cons"]:checkbox:checked');
        var ids = [];
        checkBoxs.each(function (t, e) {
            ids.push(parseInt(e.value))
        })
        var data = {ids: ids}
        $.ajax({
            url: base + '/conversation/removeConvs',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(data),
            success: function (result) {
                if (result == 1) {
                    checkBoxs.each(function (i, e) {
                        $(e).parent().parent().remove();
                    })
                    $('input:checkbox').prop('checked', false)
                }
            }, error: function () {
                swal({
                    text: '系统繁忙！'
                })
            }
        })
    });

</script>
